// 封装获取id元素函数
function $(id) {
  return document.getElementById(id);
};

// 封装清空旧数据的函数
function cleanDom() {
  $("main").innerHTML = `
  <h2>
  <strong>Person</strong>
  <span>Wealth</span>
  </h2> 
  `;

  // 打开状态
  flag = true;
};

// 存当前操作的数据
let nowData = [];
// 初始值
let index = 0;
// 设置开关(用于显示总金额)
let flag = true;


// 给按钮添加点击事件
$("toggle").addEventListener("click", function () {
  // 给body添加显示导航类名
  document.body.classList.toggle("show_nav");
});


// 添加账户
$("add-user").addEventListener("click", function () {
  // 判断是否到达最大值
  if (index >= dataInfo.length) return;

  // 每次添加的数据全部放进nowData数组中保存
  nowData.push(dataInfo[index]);

  // 渲染页面
  let newH2 = document.createElement("h2");
  // `` 模版字符串 es6新语法
  newH2.innerHTML = `
    <strong>${dataInfo[index].name}</strong>
    <span>$ ${(dataInfo[index].money).toLocaleString()}</span>
  `;
  // 判断是否出现总金额
  if (flag) {
    $("main").appendChild(newH2);
  } else {
    // ????
    // 添加节点到总金额元素的前面
    $("main").insertBefore(newH2, $("main").lastElementChild)
  }


  // 自增放后面
  index++;
});


// 资金翻倍
$("double").addEventListener("click", function () {
  // 清空旧数据
  cleanDom();

  nowData.forEach(function (item) {
    // 数据翻倍 (需要重新赋值,改变原数据)
    item.money = item.money * 2;
    // 渲染页面
    let newH2 = document.createElement("h2");
    // `` 模版字符串 es6新语法
    newH2.innerHTML = `
    <strong>${item.name}</strong>
    <span>$ ${(item.money).toLocaleString()}</span>
    `;
    $("main").appendChild(newH2);
  });
});

// 查询百万富翁
$("show-millionaire").addEventListener("click", function () {
  // 清空旧数据
  cleanDom();

  // 过滤nowData数据, 是否存在1000000
  nowData = nowData.filter(function (item) {
    return item.money >= 1000000;
  });

  nowData.forEach(function (item) {
    // 渲染页面
    let newH2 = document.createElement("h2");
    // `` 模版字符串 es6新语法
    newH2.innerHTML = `
    <strong>${item.name}</strong>
    <span>$ ${(item.money).toLocaleString()}</span>
    `;
    $("main").appendChild(newH2);
  });
});


// 财富榜
$("sort").addEventListener("click", function () {
  // 清空旧数据
  cleanDom();

  // 对nowData数据的money进行排序 (从大到小排序)
  nowData.sort(function (a, b) {
    return b.money - a.money;
  });

  nowData.forEach(function (item) {
    // 渲染页面
    let newH2 = document.createElement("h2");
    // `` 模版字符串 es6新语法
    newH2.innerHTML = `
    <strong>${item.name}</strong>
    <span>$ ${(item.money).toLocaleString()}</span>
    `;
    $("main").appendChild(newH2);
  });
});


// 计算总额
$("calculate").addEventListener("click", function () {
  let sum = 0;
  // 累加
  sum = nowData.reduce(function (total, current, currentIndex, arr) {
    return total += current.money;
  }, 0);

  let newH2 = document.createElement("h2");
  // `` 模版字符串 es6新语法
  newH2.innerHTML = `
    <strong>总金额</strong>
    <span>$ ${(sum).toLocaleString()}</span>
    `;
  
  // 判断是否可以继续显示总金额
  if (flag) {
    $("main").appendChild(newH2);
    // 关闭状态
    flag = false;
  };

});